<template>
	<view class="My-box">
		<view class="My-header">
			<view class="My-header-info">
				<view class="My-header-info-left">
					<view class="My-header-info-left-image">
						<image :src="avater" mode="">
						</image>
					</view>
					<view class="My-header-info-left-info">
						<view class="My-header-info-left-info-nickname">{{nickname}}</view>
						<view class="My-header-info-left-info-Account">账号：{{Accounts}}</view>
					</view>
				</view>
				<navigator url="../../web/jyh/userSetUp" hover-class='none'>
					<view class="My-header-info-right">
						<uni-icons type="gear" size="25"></uni-icons>
					</view>
				</navigator>
			</view>
		</view>
		<view class="My-Nav-middle">
			<navigator url="../../web/jyh/dynamic" hover-class='none'>
				<view class="My-Nav-middle-item">
					<view class="My-Nav-middle-item-top'">
						23
					</view>
					<view class="My-Nav-middle-item-botoom">
						收藏
					</view>
				</view>
			</navigator>
			<view class="My-Nav-middle-item" @click="gobrowse">
				<view class="My-Nav-middle-item-top'">
					345
				</view>
				<view class="My-Nav-middle-item-botoom">
					浏览
				</view>
			</view>

			<navigator url="../../web/jyh/concern" hover-class='none'>
				<view class="My-Nav-middle-item">
					<view class="My-Nav-middle-item-top'">
						4
					</view>
					<view class="My-Nav-middle-item-botoom">
						关注
					</view>
				</view>
			</navigator>
			<navigator url="../../web/jyh/followMe" hover-class='none'>
				<view class="My-Nav-middle-item">
					<view class="My-Nav-middle-item-top'">
						23
					</view>
					<view class="My-Nav-middle-item-botoom">
						粉丝
					</view>
				</view>
			</navigator>
			<view class="My-Nav-middle-item" @click="gomessage">
				<view class="My-Nav-middle-item-top'">
					34
				</view>
				<view class="My-Nav-middle-item-botoom">
					留言
				</view>
			</view>
			<view class="My-Nav-middle-item" @click="goprivate">
				<view class="My-Nav-middle-item-top'">
					87
				</view>
				<view class="My-Nav-middle-item-botoom">
					私信
				</view>
			</view>
		</view>
		<view class="My-nav-bottom">
			<view class="navList" v-for="item in nav" :key='item.id'>
				<view :class="{'nav-active':isActive===item.id}" @click="checkNav(item.id)">
					{{item.navName}}
				</view>
			</view>
		</view>
		<view class="nav_items">
			<view class="nav_item" v-if="isActive==0">
				<uni-collapse accordion :v-model="accordionVal" @change="change">
					<uni-collapse-item v-for="(item,index) in collapses" :key="index" :title-border="false"
						:border="false" titleBorder="none" :show-arrow='false'>
						<template v-slot:title>
							<view class="uni-collapse-title">
								<view class="uni-collapse-title-left">
									<view
										:class="[accordionVal===index?'uni-collapse-info-active uni-collapse-inco':'uni-collapse-inco',accordionVal==='' && OldsaccordionVal===index?'uni-collapse-info-noactive uni-collapse-inco':'uni-collapse-inco']">
										<uni-icons type="bottom" size="20"></uni-icons>
									</view>
									<view class="uni-collapse-title-right"><text
											style="margin-right: 10px;margin-left: 5px;">{{item.collapseName}}</text>
										{{item.children.length}}
									</view>
								</view>
								<view class="">
									<uni-icons type="list" size="20">22222222</uni-icons>
								</view>
							</view>
						</template>
						<view v-for="item in item.children" :key="item.id" class="content">
							<view class="text">
								<view class="idle" @click="handleshow()">
									<view>
										<image class=" idle-top" src="../../../static/img/video.png" mode="">
										</image>
									</view>
									<view class="idle-center">
										<text class="tit">{{item.name}}</text>
										<p>
											<span class="p-one">￥{{item.price}}</span>
											<span class="p-two">
												<image class="p-img" src="../../../static/item/眼睛.png"></image>
												{{item.read}}
											</span>
											<span class="p-three">
												<image class="p-imgone" src="../../../static/tyh/消息.png"></image>
												{{item.pingl}}
											</span>
										</p>
									</view>
									<image class="idle-but" src="../../../static/tyh/more.png" mode=""></image>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="nav_item" v-if="isActive==1">
				<view class="items" v-for="item in unused" :key="item.id" @click="handleshowtwo()">
					<view>
						<image class="itemimg" src="../../../static/img/video.png" mode=""></image>
					</view>
					<div class="contents">
						<p class="tit">{{item.name}}</p>
						<p class="desc" @click="inputDialog.open()">
							卖家:{{item.nameshop}}
							<span class="times">今天:{{item.time}}</span>
						</p>
					</div>
					<image class="moreimg" src="../../../static/tyh/more.png" mode=""></image>
				</view>
				<view class="animate__animated animate__slideInUp" v-show="showmaketwo===true">
					<view class=" footer-one">
						<view>
							<image class="fanhui" src="../../../static/tyh/放弃.png" mode=""></image>
						</view>
						<text class="dier">放弃预约</text>
					</view>
					<view class="footer-two" @click="handleshowtwo()">
						<text class="xdiyi">取消</text>
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==2">
			2
		</view>
	</view>
	<view class="animate__animated animate__slideInUp" v-show="showmake===true">
		<view class=" footer-one">
			<view>
				<image class="fanhui" src="../../../static/tyh/返回顶部.png" mode=""></image>
			</view>
			<text class="dier">发布</text>
			<view>
				<image class="fanhuier" src="../../../static/tyh/删除.png" mode=""></image>
			</view>
			<text class="dier">删除</text>
		</view>
		<view class="footer-two">
			<text class="xdiyi" @click="handleshow()">取消</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed,
		onMounted
	} from "vue";

	let showmaketwo = ref(null)
	let showmake = ref(null)
	let Account = ref('')
	let nickname = ref('')
	let avater   = ref('')
	getUserinfo()

	function handleshowtwo() {
		showmaketwo.value = !showmaketwo.value
	}
	async function getUserinfo() {

		let {
			data
		} = await wx.getStorage({
			key: 'user'
		})
	
		Account.value  = data.phone
		nickname.value = data.nickname
		avater.value   = data.avater
	}
	let unused = reactive([{
			id: '001',
			name: '盆栽转让,三十大洋买的带不走发生',
			nameshop: '啊手动阀',
			time: '1:52',
		},
		{
			id: '002',
			name: '我也不知道回收什么了那就回收的',
			nameshop: '不知名',
			time: '12:11',
		},
		{
			id: '003',
			name: '到底什么是显示发布啊我真不知道',
			nameshop: '格子衫',
			time: '8:32',
		},
		{
			id: '004',
			name: '不知名阿斯蒂芬干哈和反反复复烦',
			nameshop: '里猪头打老虎',
			time: '10:59',
		},
	])
	let nav = reactive([{
		id: 0,
		navName: '闲置发布'
	}, {
		id: 1,
		navName: '回收处理'
	}, {
		id: 2,
		navName: '托管寄卖'
	}])
	let collapses = reactive([{
		collapseName: '在卖',
		num: 6,
		children: [{
				id: '001',
				name: '大功率电风扇30大洋买的带不走阿斯生',
				price: '15.0',
				read: '130',
				pingl: '32'
			},
			{
				id: '002',
				name: '紧急出售要走了，低价出售自行车',
				price: '18.0',
				read: '128',
				pingl: '12'
			},
		]
	}, {
		collapseName: '草稿',
		num: 8,
		children: [{
				id: '001',
				name: '大功率电风扇30大洋买的带不走阿斯生',
				price: '35.0',
				read: '130',
				pingl: '32'
			},
			{
				id: '002',
				name: '紧急出售要走了，低价出售自行车',
				price: '145.0',
				read: '63',
				pingl: '32'
			},
		]
	}, {
		collapseName: '已下架',
		num: 16,
		children: [{
			id: '001',
			name: '下架李猪头大洋买的带不走阿斯啊',
			price: '15.0',
			read: '130',
			pingl: '32'
		}]
	}, {
		collapseName: '已作废',
		num: 5,
		children: [{
			id: '001',
			name: '作废田狗头大洋买的带不走阿斯啊',
			price: '15.0',
			read: '130',
			pingl: '32'
		}]
	}, ])

	let isActive = ref(0)
	let OldsaccordionVal = ref()
	let accordionVal = ref(null)
	let Accounts = computed(() => Account.value.length > 2 ? Account.value.substr(0, 2) + new Array(Account.value
		.length - 2).join('*') + Account.value.substr(-2) : Account.value)

	function checkNav(id) {
		isActive.value = id
	}

	function change(e) {
		if (e) {
			accordionVal.value = e * 1
			return
		}
		accordionVal.value = ''
	}

	function gobrowse() {
		uni.navigateTo({
			url: '/pages/web/tyh/browse'
		})
	}

	function gomessage() {
		console.log('22222222')
		uni.navigateTo({
			url: '/pages/web/tyh/message'
		})
	}

	function handleshow() {
		showmake.value = !showmake.value
	}

	function goprivate() {
		uni.navigateTo({
			url: '/pages/web/tyh/websocket'
		})
	}

	watch(accordionVal, (newValue, oldValue) => {
		OldsaccordionVal.value = oldValue
	})
</script>

<style lang="less" scoped>
	.My-box {
		box-sizing: border-box;
		padding: 0px 10px;
	}

	.animate__animated {
		width: 100%;
		height: 16vh;
		position: fixed;
		bottom: 40px;
		margin-left: -20rpx;

		.footer-one {
			display: flex;
			width: 100%;
			height: 120rpx;
			background-color: rgb(222, 222, 222);

			.fanhui {
				width: 45rpx;
				height: 45rpx;
				margin-top: 45rpx;
				margin-left: 40rpx;
			}

			.fanhuier {
				width: 50rpx;
				height: 50rpx;
				margin-top: 40rpx;
				margin-left: 370rpx;
			}

			.dier {
				font-size: 21px;
				line-height: 120rpx;
				margin-left: 30rpx;
			}
		}

		.footer-two {
			width: 100%;
			height: 135rpx;
			background-color: rgb(222, 222, 222);
			margin-top: 12rpx;

			.xdiyi {
				font-size: 21px;
				line-height: 135rpx;
				margin-left: 340rpx;
			}
		}
	}

	.idle {
		display: flex;
		height: 150rpx;
		margin-top: 20px;
		background-color: #fff;

		.idle-top {
			width: 100rpx;
			height: 100rpx;
			margin-top: 25rpx;
			margin-left: 20rpx;
		}

		.idle-center {
			margin-top: 35rpx;
			margin-left: 30rpx;

			// width: 90%;
			.tit {
				display: inline-block;
				width: 75%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.p-one {
				margin-right: 45rpx;
				margin-bottom: -5rpx;
			}

			.p-two {
				margin-right: 45rpx;
			}

			.p-img {
				width: 40rpx;
				height: 40rpx;
				margin-top: 5rpx;
				margin-bottom: -10rpx;
				margin-right: 15rpx;
			}

			.p-imgone {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
				margin-bottom: -10rpx;
				margin-right: 15rpx;
			}
		}

		.idle-but {
			width: 60rpx;
			height: 60rpx;
			margin-top: 45rpx;
			margin-left: 100rpx;
		}
	}

	.My-header {
		.My-header-icons {
			// background-color: aqua;
			padding: 5px 0px;

			text {
				color: #a1a1a1 !important;
			}
		}

		.My-header-info {
			padding: 10px 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.My-header-info-left {
				display: flex;

				// align-items: flex-start;
				.My-header-info-left-image {
					width: 50px;
					height: 50px;
					margin-right: 10px;
					border-radius: 100%;
				}

				.My-header-info-left-image image {
					width: 100%;
					height: 100%;
					border-radius: 100%;

				}

				.My-header-info-left-info {
					.My-header-info-left-info-nickname {
						font-weight: 700;
						color: #938c8c;
					}

					.My-header-info-left-info-Account {
						margin-top: 5px;
					}
				}
			}
		}
	}

	.My-Nav-middle {
		margin-top: 10px;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-around;
		border-bottom: 2px #dad6d6 solid;

		.My-Nav-middle-item {
			text-align: center;
		}
	}

	.My-nav-bottom {
		margin-top: 15px;
		display: flex;

		.navList {
			// width: 20%;
			padding: 0px 10px;
		}
	}

	.nav-active {
		border-bottom: #ec141b 4px solid;
	}

	.nav_items {
		padding: 5px 10px;
	}

	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		// padding: 15px;
		margin-top: -35rpx;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
		// justify-content: s;
	}

	.uni-collapse-inco {
		height: 20px;
		width: 20px;
	}

	.uni-collapse-info-active {
		transform: rotate(180deg) !important;
		transition-property: transform !important;
		transition-duration: 0.3s !important;
		transition-timing-function: ease !important;
	}

	.uni-collapse-info-noactive {
		transform: rotate(360deg) !important;
		transition-property: transform !important;
		transition-duration: 0.3s !important;
		transition-timing-function: ease !important;
	}

	.uni-collapse-title {
		display: flex;
		padding: 10px 0px;
		justify-content: space-between;
		align-items: center;

		.uni-collapse-title-left {
			display: flex;
			align-items: center;
		}
	}

	.items {
		display: flex;
		height: 150rpx;
		background-color: #fff;
		border-bottom: 1px solid black;

		.itemimg {
			width: 100rpx;
			height: 100rpx;
			// width: 00rpx;
			// height: 100rpx;
			margin-top: 20rpx;
			margin-left: -10rpx;
		}

		.moreimg {
			width: 180rpx;
			height: 60rpx;
			margin-top: 45rpx;
			margin-right: 30rpx;
		}

		.contents {
			margin-left: 30rpx;
			flex: 1;

			.tit {
				width: 75%;
				margin-top: 25rpx;
				font-size: 35rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.desc {
				margin-top: 5rpx;
				color: #787878;
				font-size: 29rpx;

				.times {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>